<template>
    <div class="box">
        <Header v-model="text" :add="add"></Header>
        <!-- <Header :add="add" @search="onSearch"></Header> -->
        <List :tasks="tasksFilter"></List>
        <Footer v-model="flag" :deldone="deldone" :remove="remove" :count="count" :total="total"></Footer>
    </div>
</template>

<script setup>
// 导入相关组件
import Header from './components/Header.vue';
import List from './components/List.vue';
import Footer from './components/Footer.vue';

// 从vue中导入ref函数
import { ref, provide, computed, watch } from 'vue'

// 从本地存储获取数据
let tk = JSON.parse(localStorage.getItem('tasks'))

// 模拟数据（如果本地存储中能获取到数据，将其赋值给存储模拟数据的变量）
let tasks = ref(tk || [
    { id: 1, title: '晨会', createtime: 1761619193094, important: true, isdel: false, isdone: true },
    { id: 2, title: '日宣誓', createtime: 1761519193094, important: false, isdel: true, isdone: false },
    { id: 3, title: '日分享', createtime: 1761619163094, important: true, isdel: false, isdone: false },
    { id: 4, title: '早自习', createtime: 1761614193094, important: false, isdel: true, isdone: false },
    { id: 5, title: '日总结', createtime: 1761614193094, important: false, isdel: false, isdone: false },
])

// 侦听数据变化，如果数据改变，将改变后的数据存储到本地存储空间
watch(tasks, (val) => {
    localStorage.setItem('tasks', JSON.stringify(val))
}, {
    deep: true
})

// // 搜索
let text = ref('')
// 搜索方法
// const onSearch = (keywords) => {
//     text.value = keywords
// }

// 数据筛选
let flag = ref(0) // 0：全部 1：未完成 2：已完成 3：回收站
let tasksFilter = computed(() => {
    if (flag.value === 0) {
        return tasks.value.filter(item => item.isdel !== true && item.title.includes(text.value))
    } else if (flag.value === 1) {
        return tasks.value.filter(item => item.isdone === false && item.isdel !== true && item.title.includes(text.value))
    } else if (flag.value === 2) {
        return tasks.value.filter(item => item.isdone === true && item.isdel !== true && item.title.includes(text.value))
    } else if (flag.value === 3) {
        return tasks.value.filter(item => item.isdel === true && item.title.includes(text.value))
    }
})
// 数据统计:已完成数量/总数量
let total = computed(() => {
    return tasks.value.filter(item => item.isdel !== true).length
})
let count = computed(() => {
    return tasks.value.filter(item => item.isdone === true && item.isdel !== true).length
})

// 添加方法
const add = (obj) => {
    tasks.value.push(obj)
}

// 删除方法
const del = (id) => {
    if (confirm('确定要删除该任务吗？')) {
        // 通过id找到要删除的数据
        let res = tasks.value.find(item => item.id === id)
        // 修改数据的isdel属性为true
        res.isdel = true
    }
}
// 向后代传递删除方法
provide('del', del)

// 还原方法
const restore = (id) => {
    if (confirm('确定要还原该任务吗？')) {
        // 通过id找到要还原的数据
        let res = tasks.value.find(item => item.id === id)
        // 修改数据的isdel属性为false
        res.isdel = false
    }
}
provide('restore', restore)

// 彻底删除方法
const realdel = (id) => {
    if (confirm('确定要彻底删除该任务吗？')) {
        // 从tasks中筛选出id不等于传递过来的参数id的数据，赋值给tasks
        tasks.value = tasks.value.filter(item => item.id !== id)
    }
}
// 向后代传递彻底删除方法
provide('realdel', realdel)

// 清除已完成方法
const deldone = () => {
    if (confirm('确定要清除已完成的任务吗？')) {
        // 筛选出要清除的任务（isdone为true的数据）
        let res = tasks.value.filter(item => item.isdone === true)
        // 遍历修改数据的isdel属性为true
        res.forEach(item => item.isdel = true)
    }
}

// 清空回收站
const remove = () => {
    if (confirm('确定要清空回收站吗？')) {
        // 筛选出要保留的数据（isdel为false的数据）将数据赋值给tasks
        tasks.value = tasks.value.filter(item => item.isdel === false)
    }
}

// 修改任务标题的方法
const edittitle = (obj) => { // obj:{id: props.item.id,title: props.item.title}
    // 通过obj中的id找到要修改的数据
    let res = tasks.value.find(item => item.id === obj.id)
    // 修改任务标题
    res.title = obj.title
}
// 向后代传递edittitle方法
provide('edittitle', edittitle)

// 修改important
// const changeImportant = (id) => {
//     let res = tasks.value.find(item => item.id === id)
//     res.important = !res.important
// }
// 向后代传递changeImportant方法
// provide('changeImportant', changeImportant)
</script>

<style scoped>
.box {
    width: 600px;
    border: 1px solid gainsboro;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>